import { getShipAis } from '@/api/wan/shipAis';
import Map from 'ol/Map';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import Polygon from 'ol/geom/Polygon';
import { Style, Icon, Fill, Stroke, Circle as CircleStyle } from 'ol/style';
import { getLength } from 'ol/sphere';
import LineString from 'ol/geom/LineString';
import Overlay from 'ol/Overlay';
import mapUtils from '@/utils/mapUtils';

// 颜色定义
const COLORS = {
  red: '#d81e06',
  yellow: '#f4ea2a',
  green: '#1afa29'
};

// 使用内联SVG直接定义超锐角三角形图标 - 增强方向性
const SVG_ICONS = {
  // 红色超锐角三角形
  red: `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
    <polygon points="50,30 65,99 35,99" fill="${COLORS.red}"/>
  </svg>`,
  // 黄色超锐角三角形
  yellow: `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
    <polygon points="50,30 65,99 35,99" fill="${COLORS.yellow}"/>
  </svg>`,
  // 绿色超锐角三角形
  green: `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
    <polygon points="50,30 65,99 35,99" fill="${COLORS.green}"/>
  </svg>`
};

// 将SVG转换为data URL
const ICON_PATHS = {
  red: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(SVG_ICONS.red),
  yellow: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(SVG_ICONS.yellow),
  green: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(SVG_ICONS.green)
};

// 添加电子围栏类型定义
interface ElectronicFence {
  coordinates: number[][];
  name?: string;
  type?: string;
  remark?: string;
  id?: number | string;
}

// 修改fencePolygons的类型定义
let fencePolygons: ElectronicFence[] = [];

// 船舶要素图层和地图实例
let shipVectorLayer: VectorLayer | null = null;
let mapInstance: Map | null = null;

// 存储船舶弹窗对象
const shipPopupOverlays: Overlay[] = [];
// 存储船舶要素
const shipFeatures: Feature[] = [];
// 悬停提示弹窗
let hoverTooltip: Overlay | null = null;
let hoverTooltipElement: HTMLElement | null = null;

// 保存缩放等级用于动态调整图标大小
let currentZoom: number = 10;

// 添加围栏悬浮提示元素和覆盖物
let fenceTooltipElement: HTMLElement | null = null;
let fenceTooltipOverlay: Overlay | null = null;

// 添加全局emitter声明，确保TypeScript不报错
declare global {
  interface Window {
    emitter: any;
  }
}

/**
 * 初始化船舶跟踪
 * @param map 地图实例
 */
export function initShipTracking(map: Map): void {
  mapInstance = map;
  
  // 记录初始缩放级别
  currentZoom = map.getView().getZoom() || 10;
  
  // 清除可能存在的未清除的绘图交互
  clearAllDrawInteractions();
  
  // 使用mapUtils中的vectorSource
  shipVectorLayer = new VectorLayer({
    source: mapUtils.getVectorSource(),
    style: new Style({
      // 默认样式，实际会被每个要素自己的样式覆盖
      image: new Icon({
        src: ICON_PATHS.green,
        scale: 0.3
      })
    }),
    zIndex: 10 // 确保船舶显示在上方
  });
  
  // 添加船舶图层到地图
  map.addLayer(shipVectorLayer);
  
  // 创建悬停提示元素
  createHoverTooltip();
  
  // 添加鼠标移动监听器用于悬停提示
  map.on('pointermove', handlePointerMove);
  
  // 添加缩放事件监听，用于动态调整图标大小
  map.on('moveend', () => {
    currentZoom = map.getView().getZoom() || 10;
    // 更新所有船舶图标样式以适应新的缩放级别
    updateAllShipIconsScale();
  });
  
  // console.log('船舶跟踪已初始化');
}

/**
 * 清除所有可能存在的绘图交互
 */
function clearAllDrawInteractions() {
  if (!mapInstance) return;
  
  // 获取地图上所有的交互
  const interactions = mapInstance.getInteractions().getArray();
  
  // 找到并移除Draw类型的交互
  const drawInteractions = interactions.filter(interaction => 
    interaction.constructor.name.includes('Draw') || 
    interaction.constructor.name.includes('Select') || 
    interaction.constructor.name.includes('Modify'));
  
  drawInteractions.forEach(interaction => {
    mapInstance?.removeInteraction(interaction);
  });
  
  // console.log(`已清除 ${drawInteractions.length} 个绘图交互`);
}

/**
 * 根据当前缩放级别更新所有船舶图标的比例
 */
function updateAllShipIconsScale() {
  shipFeatures.forEach(feature => {
    const shipData = feature.get('shipData');
    if (!shipData) return;
    
    const iconType = determineShipIconType([shipData.lon, shipData.lat]);
    const style = createShipIconStyle(iconType, shipData.cog);
    feature.setStyle(style);
  });
}

/**
 * 创建悬停提示元素
 */
function createHoverTooltip(): void {
  if (!mapInstance) return;
  
  // 如果已存在，先移除
  if (hoverTooltip) {
    mapInstance.removeOverlay(hoverTooltip);
  }
  
  // 创建提示元素
  hoverTooltipElement = document.createElement('div');
  hoverTooltipElement.className = 'ship-hover-tooltip';
  hoverTooltipElement.style.cssText = `
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    pointer-events: none;
    z-index: 1000;
    max-width: 300px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    transform: translate(-50%, -130%);
  `;
  
  // 创建提示覆盖物
  hoverTooltip = new Overlay({
    element: hoverTooltipElement,
    offset: [0, 0],
    positioning: 'bottom-center',
    stopEvent: false
  });
  
  // 添加到地图
  mapInstance.addOverlay(hoverTooltip);
}

/**
 * 处理鼠标移动事件以显示悬停提示
 */
function handlePointerMove(event: any): void {
  if (!mapInstance || !hoverTooltip || !hoverTooltipElement) return;
  
  // 默认隐藏提示
  hoverTooltip.setPosition(undefined);
  
  // 检查鼠标是否悬停在船舶要素上
  const feature = mapInstance.forEachFeatureAtPixel(event.pixel, (feature) => feature);
  
  if (feature && feature.get('type') === 'ship') {
    // 获取船舶数据
    const shipData = feature.get('shipData');
    if (!shipData) return;
    
    // 更新提示内容
    const name = shipData.name || shipData.chineseName || shipData.englishName || '未知';
    const mmsi = shipData.mmsi || '未知';
    const shipType = formatShipType(shipData.shipType);
    const sog = typeof shipData.sog === 'number' ? `${shipData.sog.toFixed(1)}节` : '未知';
    const heading = typeof shipData.heading === 'number' ? `${shipData.heading.toFixed(1)}°` : 
                  (typeof shipData.cog === 'number' ? `${shipData.cog.toFixed(1)}°` : '未知');
    
    hoverTooltipElement.innerHTML = `
      <strong>${name}</strong><br>
      MMSI: ${mmsi}<br>
      类型: ${shipType}<br>
      航速: ${sog}<br>
      航向: ${heading}
    `;
    
    // 显示提示
    const geometry = feature.getGeometry();
    if (geometry instanceof Point) {
      hoverTooltip.setPosition(geometry.getCoordinates());
    }
  }
}

/**
 * 创建围栏悬浮提示元素
 */
function createFenceTooltip(): void {
  if (!mapInstance) return;
  
  // 如果已存在，先移除
  if (fenceTooltipOverlay) {
    mapInstance.removeOverlay(fenceTooltipOverlay);
    fenceTooltipOverlay = null;
  }
  
  if (fenceTooltipElement) {
    if (fenceTooltipElement.parentNode) {
      fenceTooltipElement.parentNode.removeChild(fenceTooltipElement);
    }
    fenceTooltipElement = null;
  }
  
  try {
    // 创建提示元素
    fenceTooltipElement = document.createElement('div');
    fenceTooltipElement.className = 'fence-tooltip';
    
    // 不使用内联样式，改为使用CSS类
    /* 
    fenceTooltipElement.style.cssText = `
      position: absolute;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 6px 10px;
      border-radius: 4px;
      font-size: 12px;
      pointer-events: none;
      z-index: 1000;
      max-width: 200px;
      white-space: nowrap;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
      transform: translate(10px, -50%);
      border-left: 3px solid #409EFF;
      opacity: 0.9;
    `;
    */
    
    // 创建提示覆盖物
    fenceTooltipOverlay = new Overlay({
      element: fenceTooltipElement,
      offset: [15, 0], // 稍微增加偏移，避免鼠标正好悬停在提示上
      positioning: 'center-left',
      stopEvent: false, // 确保事件可以穿透
      className: 'fence-tooltip-overlay' // 添加类名便于调试
    });
    
    // 确保DOM元素已创建
    document.body.appendChild(fenceTooltipElement);
    
    // 先将元素设置为不可见
    fenceTooltipElement.style.display = 'none';
    
    // 添加到地图
    mapInstance.addOverlay(fenceTooltipOverlay);
    
    console.log('电子围栏提示元素已创建');
  } catch (error) {
    console.error('创建电子围栏提示元素失败:', error);
  }
}

/**
 * 设置电子围栏
 * @param fences 电子围栏数据
 */
export function setFences(fences: ElectronicFence[] | number[][][]): void {
  try {
    if (!mapInstance) {
      console.error('地图未初始化，无法设置电子围栏');
      return;
    }
    
    // 储存围栏数据
    // 如果是简单的坐标数组，转换为ElectronicFence对象数组
    if (fences.length > 0 && Array.isArray(fences[0]) && Array.isArray(fences[0][0])) {
      // 这是坐标数组格式
      fencePolygons = (fences as number[][][]).map((coords, index) => ({
        coordinates: coords,
        name: `围栏 ${index + 1}`,
        type: '默认围栏',
        remark: ''
      }));
    } else {
      // 这是ElectronicFence对象数组格式
      fencePolygons = fences as ElectronicFence[];
    }
    
    // 清除现有围栏
    if (shipVectorLayer) {
      mapInstance.removeLayer(shipVectorLayer);
    }
    
    // 如果没有围栏数据，直接返回
    if (!fencePolygons || !Array.isArray(fencePolygons) || fencePolygons.length === 0) {
      console.log('没有电子围栏数据');
      return;
    }
    
    // 创建围栏悬浮提示
    createFenceTooltip();
    
    // 创建围栏图层
    const source = new VectorSource();
    
    // 绘制每个围栏
    fencePolygons.forEach((fence, index) => {
      const coordinates = fence.coordinates;
      if (!coordinates || !Array.isArray(coordinates) || coordinates.length < 3) {
        console.warn(`围栏 ${index} 数据无效，至少需要3个点`);
        return;
      }
      
      // 创建多边形
      const polygon = new Polygon([coordinates]);
      
      // 创建要素
      const feature = new Feature({
        geometry: polygon,
        fenceId: fence.id || index,
        name: fence.name || `围栏 ${index + 1}`,
        type: fence.type || '默认围栏',
        remark: fence.remark || '',
        fenceFeature: true // 添加标记，方便识别围栏要素
      });
      
      // 设置要素样式
      feature.setStyle(new Style({
        fill: new Fill({
          color: 'rgba(0, 123, 255, 0.2)'
        }),
        stroke: new Stroke({
          color: '#007bff',
          width: 2
        })
      }));
      
      // 添加要素到数据源
      source.addFeature(feature);
    });
    
    // 创建矢量图层
    shipVectorLayer = new VectorLayer({
      source: source,
      zIndex: 90, // 置于船舶图层下方
      style: function(feature) {
        return new Style({
          fill: new Fill({
            color: 'rgba(0, 123, 255, 0.2)'
          }),
          stroke: new Stroke({
            color: '#007bff',
            width: 2
          })
        });
      }
    });
    
    // 添加图层到地图
    mapInstance.addLayer(shipVectorLayer);
    
    // 监听地图移动事件，移动时隐藏提示
    mapInstance.on('movestart', () => {
      if (fenceTooltipOverlay) {
        fenceTooltipOverlay.setPosition(undefined);
      }
    });
    
    // 监听鼠标移动事件
    mapInstance.on('pointermove', handleFenceHover);
    
    console.log(`已加载 ${source.getFeatures().length} 个电子围栏`);
    
  } catch (error) {
    console.error('设置电子围栏失败:', error);
  }
}

/**
 * 处理围栏鼠标悬停
 */
function handleFenceHover(event: any): void {
  if (!mapInstance || !fenceTooltipOverlay || !fenceTooltipElement) return;
  
  // 拖动时隐藏提示
  if (event.dragging) {
    fenceTooltipOverlay.setPosition(undefined);
    // 确保元素不可见
    if (fenceTooltipElement) {
      fenceTooltipElement.style.display = 'none';
    }
    return;
  }
  
  // 检查鼠标是否悬停在围栏要素上
  let hoveredFeature: Feature | null = null;
  
  mapInstance.forEachFeatureAtPixel(event.pixel, (feature: Feature) => {
    // 检查是否为围栏要素
    if (feature.get('fenceFeature') === true) {
      hoveredFeature = feature;
      return true; // 找到围栏要素，停止迭代
    }
    return false;
  });
  
  // 更新鼠标样式
  mapInstance.getTargetElement().style.cursor = hoveredFeature ? 'pointer' : '';
  
  // 如果有悬停的围栏要素，显示提示
  if (hoveredFeature) {
    const name = hoveredFeature.get('name') || '未命名围栏';
    const type = hoveredFeature.get('type') || '';
    const remark = hoveredFeature.get('remark') || '';
    
    // 更新提示内容
    let tooltipContent = `<div><strong>${name}</strong></div>`;
    if (type) {
      tooltipContent += `<div>类型: ${type}</div>`;
    }
    if (remark) {
      tooltipContent += `<div>备注: ${remark}</div>`;
    }
    
    // 更新内容
    if (fenceTooltipElement) {
      fenceTooltipElement.innerHTML = tooltipContent;
      fenceTooltipElement.style.display = 'block'; // 确保元素可见
    }
    
    // 设置提示位置为鼠标位置
    fenceTooltipOverlay.setPosition(event.coordinate);
    
    // 阻止事件冒泡和默认行为，防止其他处理器接收到事件
    if (event.originalEvent) {
      event.originalEvent.stopPropagation();
      event.originalEvent.preventDefault();
    }
    
    // 禁止触发InfoWindow相关的事件
    event.stopPropagation && event.stopPropagation();
    
    // 确保禁用所有window.emitter事件
    if (window.emitter) {
      try {
        // 拦截任何可能的show-info-window事件
        window.emitter.off('show-info-window');
      } catch (e) {}
    }
  } else {
    // 没有悬停在围栏上，隐藏提示
    fenceTooltipOverlay.setPosition(undefined);
    
    // 确保元素不可见
    if (fenceTooltipElement) {
      fenceTooltipElement.style.display = 'none';
    }
  }
}

// 在组件销毁时清理围栏提示
export function cleanupFenceTooltip(): void {
  try {
    // 移除tooltip覆盖物
    if (mapInstance && fenceTooltipOverlay) {
      mapInstance.removeOverlay(fenceTooltipOverlay);
    }
    
    // 从DOM中移除元素
    if (fenceTooltipElement && fenceTooltipElement.parentNode) {
      fenceTooltipElement.parentNode.removeChild(fenceTooltipElement);
    }
    
    // 清空引用
    fenceTooltipOverlay = null;
    fenceTooltipElement = null;
    
    // 移除事件监听
    if (mapInstance) {
      try {
        // @ts-ignore - 由于TypeScript的限制，我们需要忽略类型检查来移除事件监听
        mapInstance.un('pointermove', handleFenceHover);
        // @ts-ignore
        mapInstance.un('movestart');
      } catch (error) {
        console.warn('移除围栏鼠标事件监听失败:', error);
      }
    }
    
    // 移除可能存在的相关样式
    const styleElements = document.querySelectorAll('style');
    styleElements.forEach(style => {
      if (style.textContent && style.textContent.includes('fence-tooltip')) {
        try {
          style.parentNode?.removeChild(style);
        } catch (e) {}
      }
    });
    
    console.log('电子围栏提示已完全清理');
  } catch (error) {
    console.error('清理电子围栏提示资源时发生错误:', error);
  }
}

/**
 * 加载船舶AIS数据
 * @returns 船舶数据数组
 */
export async function loadShipAisData(): Promise<any[]> {
  if (!mapInstance) {
    console.error('船舶跟踪未初始化');
    return [];
  }
  
  // 获取vectorSource
  const vectorSource = mapUtils.getVectorSource();
  if (!vectorSource) {
    console.error('矢量源未初始化');
    return [];
  }
  
  try {
    // console.log('正在获取船舶AIS数据...');
    
    // 调用API获取所有船舶数据
    const response = await getShipAis({});
    // console.log('获取到的船舶数据:', response);
    
    // Mock数据 - 如果后端数据为空，使用模拟数据进行测试
    const mockShipData = [
      {
        mmsi: "413237220",
        name: "SHENGCHANG77",
        time: 1689931674,
        lon: 121.8066,
        lat: 30.1755,
        sog: 11.5,
        cog: 136.0,
        rot: -731.0,
        heading: 104.0,
        callsign: "BOHJ9",
        shipType: "70",
        toBow: 10.0,
        toStern: 95.0,
        toPort: 12.0,
        toStarboard: 8.0,
        destination: "NINGBO"
      },
      {
        mmsi: "413237221",
        name: "XINYUE88",
        time: 1689931674,
        lon: 121.95,
        lat: 30.04,
        sog: 8.2,
        cog: 76.0,
        heading: 72.0,
        shipType: "71",
        destination: "SHANGHAI"
      },
      {
        mmsi: "413237222",
        name: "HAIYANG55",
        time: 1689931674,
        lon: 121.93,
        lat: 30.10,
        sog: 0.0,
        cog: 180.0,
        heading: 180.0,
        shipType: "33",
        destination: "NINGBO"
      }
    ];
    
    if (response && response.data && Array.isArray(response.data)) {
      const shipList = response.data;
      
      // 清除现有船舶标记
      clearShips();
      
      // 在地图上添加船舶标记
      shipList.forEach(ship => {
        if (ship && typeof ship.lon === 'number' && typeof ship.lat === 'number') {
          addShipToMap(ship);
        } else {
          console.warn('船舶数据缺少经纬度信息:', ship);
        }
      });
      
      // console.log(`已加载 ${shipList.length} 条船舶数据`);
      return shipList;
    } else if (response && response.rows && Array.isArray(response.rows)) {
      // 如果数据在rows字段中（与您提供的JSON结构匹配）
      const shipList = response.rows;
      
      // 清除现有船舶标记
      clearShips();
      
      // 在地图上添加船舶标记
      shipList.forEach(ship => {
        if (ship && typeof ship.lon === 'number' && typeof ship.lat === 'number') {
          addShipToMap(ship);
        } else {
          console.warn('船舶数据缺少经纬度信息:', ship);
        }
      });
      
      // console.log(`已加载 ${shipList.length} 条船舶数据`);
      return shipList;
    } else {
      // console.log('未获取到船舶数据，使用模拟数据测试');
      // 使用模拟数据
      clearShips();
      mockShipData.forEach(ship => {
        addShipToMap(ship);
      });
      // console.log(`已加载 ${mockShipData.length} 条模拟船舶数据`);
      return mockShipData;
    }
  } catch (error) {
    console.error('获取船舶AIS数据失败:', error);
    return [];
  }
}

/**
 * 清除所有船舶标记
 */
function clearShips(): void {
  const vectorSource = mapUtils.getVectorSource();
  if (!vectorSource) return;
  
  // 移除所有船舶要素
  shipFeatures.forEach(feature => {
    vectorSource.removeFeature(feature);
  });
  shipFeatures.length = 0;
  
  // 清除所有弹窗
  shipPopupOverlays.forEach(overlay => {
    mapInstance?.removeOverlay(overlay);
  });
  shipPopupOverlays.length = 0;
}

/**
 * 添加船舶到地图
 * @param ship 船舶AIS数据
 */
function addShipToMap(ship: any): void {
  if (!mapInstance) {
    console.error('地图实例未初始化');
    return;
  }
  
  const vectorSource = mapUtils.getVectorSource();
  if (!vectorSource) {
    console.error('矢量源未初始化');
    return;
  }
  
  if ((!ship.lon&& ship.lon!=0) || (!ship.lat&& ship.lat!=0)) {
    console.error('船舶缺少经纬度信息:', ship);
    return;
  }
  
  // 船舶坐标
  const coordinates: [number, number] = [ship.lon, ship.lat];
  
  // 判断船舶与电子围栏的关系，选择适当的图标
  const iconType = determineShipIconType(coordinates);
  // console.log(`船舶 ${ship.mmsi} (${ship.name || '未知'}) 使用图标类型: ${iconType}，坐标: [${coordinates.join(', ')}]`);
  
  try {
    // 创建船舶要素
    const shipFeature = new Feature({
      geometry: new Point(coordinates),
      name: ship.name || ship.chineseName || ship.englishName || ship.mmsi,
      mmsi: ship.mmsi,
      shipData: ship,
      type: 'ship'
    });
    
    // 使用SVG图标样式，并根据航向旋转
    const shipStyle = createShipIconStyle(iconType, ship.cog);
    shipFeature.setStyle(shipStyle);
    
    // 添加要素到图层
    vectorSource.addFeature(shipFeature);
    shipFeatures.push(shipFeature);
    
    // 创建弹窗
    createShipPopup(shipFeature);
    
    // console.log(`成功添加船舶: ${ship.name || ship.mmsi} (${ship.lon}, ${ship.lat})`);
  } catch (error) {
    // console.error(`添加船舶 ${ship.mmsi} 到地图时发生错误:`, error);
  }
}

/**
 * 为船舶创建弹窗
 * @param shipFeature 船舶要素
 */
function createShipPopup(shipFeature: Feature): void {
  if (!mapInstance) return;
  
  const shipData = shipFeature.get('shipData');
  if (!shipData) return;
  
  // 创建弹窗元素
  const popupElement = document.createElement('div');
  popupElement.className = 'ol-popup ship-popup';
  popupElement.innerHTML = createPopupContent(shipData);
  
  // 创建弹窗覆盖物
  const popup = new Overlay({
    element: popupElement,
    positioning: 'bottom-center',
    stopEvent: false,
    offset: [0, -15]
  });
  
  // 添加到弹窗数组
  shipPopupOverlays.push(popup);
  
  // 添加到地图
  mapInstance.addOverlay(popup);
  
  // 添加点击事件监听
  mapInstance.on('click', (event) => {
    mapInstance?.forEachFeatureAtPixel(event.pixel, (feature) => {
      if (feature === shipFeature) {
        const geometry = feature.getGeometry();
        if (geometry instanceof Point) {
          popup.setPosition(geometry.getCoordinates());
          return true;
        }
      }
      return false;
    });
  });
  
  // 添加关闭按钮事件
  const closeButton = popupElement.querySelector('.popup-close');
  if (closeButton) {
    closeButton.addEventListener('click', () => {
      popup.setPosition(undefined);
    });
  }
}

/**
 * 创建弹窗内容
 * @param ship 船舶数据
 * @returns HTML内容
 */
function createPopupContent(ship: any): string {
  const name = ship.name || ship.chineseName || ship.englishName || '未知';
  const mmsi = ship.mmsi || '未知';
  const shipType = formatShipType(ship.shipType);
  const sog = typeof ship.sog === 'number' ? `${ship.sog.toFixed(1)}节` : '未知';
  const cog = typeof ship.cog === 'number' ? `${ship.cog.toFixed(1)}°` : '未知';
  const time = ship.time ? new Date(ship.time * 1000).toLocaleString() : '未知';
  
  return `
    <div class="popup-content">
      <h3>${name}</h3>
      <p><strong>MMSI:</strong> ${mmsi}</p>
      <p><strong>船舶类型:</strong> ${shipType}</p>
      <p><strong>位置:</strong> ${ship.lat.toFixed(6)}, ${ship.lon.toFixed(6)}</p>
      <p><strong>航速:</strong> ${sog}</p>
      <p><strong>航向:</strong> ${cog}</p>
      <p><strong>更新时间:</strong> ${time}</p>
      <button class="popup-close">关闭</button>
    </div>
  `;
}

/**
 * 格式化船舶类型
 * @param type 船舶类型代码
 * @returns 船舶类型描述
 */
function formatShipType(type: number | string | undefined): string {
  if (type === undefined) return '未知';
  
  // 转为数字处理
  const typeNum = typeof type === 'string' ? parseInt(type, 10) : type;
  
  if (typeNum >= 60 && typeNum <= 69) {
    return "客船";
  } else if (typeNum >= 70 && typeNum <= 74) {
    return "货船";
  } else if (typeNum === 33) {
    return "作业船";
  } else if (typeNum === 52) {
    return "拖船";
  } else if (typeNum === 30) {
    return "渔船";
  } else {
    return "其他";
  }
}

/**
 * 判断船舶图标类型（基于与电子围栏的距离关系）
 * @param point 船舶坐标 [lon, lat]
 * @returns 图标类型：'red', 'yellow', 'green'
 */
function determineShipIconType(point: [number, number]): 'red' | 'yellow' | 'green' {
  // 如果没有围栏数据，默认使用绿色图标
  if (fencePolygons.length === 0) {
    return 'green';
  }
  
  // 默认使用绿色图标（距离围栏2公里以外）
  let iconType: 'red' | 'yellow' | 'green' = 'green';
  let minDistance = Infinity;
  
  // 遍历所有电子围栏
  for (const polygon of fencePolygons) {
    // 如果点在任一围栏内，使用红色图标
    if (isPointInPolygon(point, polygon.coordinates)) {
      return 'red';
    }
    
    // 计算点到围栏的距离
    const distance = calculateDistanceToPolygon(point, polygon.coordinates);
    
    // 更新最小距离
    if (distance < minDistance) {
      minDistance = distance;
    }
  }
  
  // 根据最小距离决定图标颜色
  if (minDistance <= 2) {
    // console.log(`点 [${point[0]}, ${point[1]}] 距离围栏 ${minDistance.toFixed(2)} 公里，使用黄色图标`);
    iconType = 'yellow';
  } else {
    // console.log(`点 [${point[0]}, ${point[1]}] 距离围栏 ${minDistance.toFixed(2)} 公里，使用绿色图标`);
  }
  
  return iconType;
}

/**
 * 判断点是否在多边形内（使用光线投射算法）
 * @param point 点坐标 [lon, lat]
 * @param polygon 多边形坐标 [[lon1, lat1], [lon2, lat2], ...]
 * @returns 是否在多边形内
 */
function isPointInPolygon(point: [number, number], polygon: number[][]): boolean {
  // 使用光线投射算法判断点是否在多边形内
  const x = point[0], y = point[1];
  let inside = false;
  
  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
    const xi = polygon[i][0], yi = polygon[i][1];
    const xj = polygon[j][0], yj = polygon[j][1];
    
    const intersect = ((yi > y) !== (yj > y)) &&
        (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
    
    if (intersect) inside = !inside;
  }
  
  return inside;
}

/**
 * 计算点到多边形的最短距离
 * @param point 点坐标 [lon, lat]
 * @param polygon 多边形坐标 [[lon1, lat1], [lon2, lat2], ...]
 * @returns 最短距离（公里）
 */
function calculateDistanceToPolygon(point: [number, number], polygon: number[][]): number {
  // 如果点在多边形内，距离为0
  if (isPointInPolygon(point, polygon)) {
    return 0;
  }

  // 计算点到多边形每条边的最短距离
  let minDistance = Infinity;
  
  for (let i = 0; i < polygon.length; i++) {
    const start = polygon[i];
    const end = polygon[(i + 1) % polygon.length]; // 循环到第一个点，闭合多边形
    
    // 计算点到线段的最短距离
    const distance = calculateDistanceToLineSegment(point, start, end);
    minDistance = Math.min(minDistance, distance);
  }
  
  return minDistance;
}

/**
 * 计算点到线段的最短距离（使用haversine公式计算地理距离）
 * @param point 点坐标 [lon, lat]
 * @param lineStart 线段起点 [lon, lat]
 * @param lineEnd 线段终点 [lon, lat]
 * @returns 最短距离（公里）
 */
function calculateDistanceToLineSegment(
  point: [number, number], 
  lineStart: number[], 
  lineEnd: number[]
): number {
  // 创建点的几何对象
  const pointGeom = new Point(point);
  
  // 创建线段
  const lineString = new LineString([lineStart, lineEnd]);
  
  // 获取线上最近的点
  const closestPoint = lineString.getClosestPoint(point);
  
  // 计算两点之间的距离（米）
  const distanceMeters = getHaversineDistance(
    point[1], point[0],  // 注意：lat, lon 顺序
    closestPoint[1], closestPoint[0]
  );
  
  // 转换为公里
  return distanceMeters / 1000;
}

/**
 * 使用Haversine公式计算两个地理坐标点之间的距离
 * @param lat1 第一个点的纬度
 * @param lon1 第一个点的经度
 * @param lat2 第二个点的纬度
 * @param lon2 第二个点的经度
 * @returns 距离（米）
 */
function getHaversineDistance(lat1: number, lon1: number, lat2: number, lon2: number): number {
  const R = 6371000; // 地球半径，单位米
  const dLat = toRadians(lat2 - lat1);
  const dLon = toRadians(lon2 - lon1);
  const a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) * 
    Math.sin(dLon/2) * Math.sin(dLon/2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  return R * c;
}

/**
 * 将角度转换为弧度
 * @param degrees 角度
 * @returns 弧度
 */
function toRadians(degrees: number): number {
  return degrees * Math.PI / 180;
}

/**
 * 创建船舶图标样式
 * @param iconType 图标类型: 'red', 'yellow', 'green'
 * @param heading 船舶航向
 * @returns Style 样式对象
 */
function createShipIconStyle(iconType: 'red' | 'yellow' | 'green', heading: number | undefined): Style {
  // 在没有航向信息的情况下，默认朝上（0度）
  const rotation = heading ? (heading * Math.PI / 180) : 0;
  
  // 根据当前缩放级别动态调整图标大小
  // 缩放级别越大，图标相对越小
  const baseScale = 0.25; // 减小基础大小
  // 缩放级别调整比例：随着缩放级别增加，图标相对变小
  const zoomAdjust = Math.max(0.5, 13 / (currentZoom + 3));
  const finalScale = baseScale * zoomAdjust;
  
  // 使用SVG图标
  return new Style({
    image: new Icon({
      src: ICON_PATHS[iconType],
      scale: finalScale,
      rotation: rotation, // 根据航向旋转
      rotateWithView: true, // 随视图旋转
      anchor: [0.5, 0.5], // 锚点设置为中心
      anchorXUnits: 'fraction',
      anchorYUnits: 'fraction'
    })
  });
} 